<template>
    <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
        <el-form-item label="用户ID" prop="userId">
            <el-input-number v-model="form.userId" :min="1" placeholder="请输入用户ID" />
        </el-form-item>

        <el-form-item label="评价内容" prop="context">
            <el-input v-model="form.context" type="textarea" :rows="4" placeholder="请输入评价内容" />
        </el-form-item>

        <el-form-item label="课程评分" prop="score">
            <el-input-number v-model="form.score" :min="1" :max="5" placeholder="请输入评分" />
        </el-form-item>

        <el-form-item label="课程ID" prop="courseId">
            <el-input-number v-model="form.courseId" :min="1" placeholder="请输入课程ID" />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';

// 表单数据
const form = ref({
    userId: null,
    context: '',
    score: 1,
    courseId: null
});

// 表单验证规则
const rules = {
    userId: [{ required: true, message: '请输入用户ID', trigger: 'blur' }],
    context: [{ required: true, message: '请输入评价内容', trigger: 'blur' }],
    score: [{ required: true, message: '请输入评分', trigger: 'blur' }],
    courseId: [{ required: true, message: '请输入课程ID', trigger: 'blur' }]
};

const formRef = ref(null);

// 提交表单
const submitForm = () => {
    formRef.value.validate(async (valid) => {
        if (valid) {
            await axios.post("/api/course_review/add", form.value);
            ElMessage.success('提交成功！');
            // 调用后端 API 或其他处理逻辑
            console.log('表单数据：', form.value);
        } else {
            ElMessage.error('请检查输入内容');
        }
    });
};

// 重置表单
const resetForm = () => {
    formRef.value.resetFields();
};
</script>

<style scoped>
.el-form {
    max-width: 500px;
    margin: 0 auto;
}
</style>
